<script setup lang="ts">
	import { useCorps } from "./utils/hook";
	import Refresh from "@iconify-icons/ep/refresh";
	import AddFill from "@iconify-icons/ri/add-circle-line";
	import { PureTableBar } from "@/components/RePureTableBar";
	import { useRenderIcon } from "@/components/ReIcon/src/hooks";
	import { ref } from "vue";
	const {
		form,
		loading,
		columns,
		dataList,
		pagination,
		isShow,
		onSearch,
		resetForm,
		openDialog,
		handleSizeChange,
		handleCurrentChange,
		deviceDetection,
		handleDelete,
	} = useCorps();
	const formRef = ref();
  const dialogVisible = ref(false)
  const dialogInfo = ref()
  const seeDetail = (row) => {
    dialogVisible.value = true;
    dialogInfo.value = row
  }
  const openDetail = (url) => {
    window.open(url, '_blank');
  }
</script>

<template>
	<div class="main">
		<el-form ref="formRef" :inline="true" :model="form"
			class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
			<!-- <el-form-item label="部门ID:">
				<el-input v-model="form.departmentId" class="!w-[180px]" clearable placeholder="部门ID" />
			</el-form-item> -->
			<el-form-item label="关键字:">
				<el-input v-model="form.name" class="!w-[180px]" clearable placeholder="请输入关键字" />
			</el-form-item>
      <el-form-item label="日期时间:">
      	<el-date-picker v-model="form.rangeTime" type="date" class="!w-[180px]" placeholder="请选择" start-placeholder="开始时间" end-placeholder="结束时间"
      	  format="YYYY-MM-DD" value-format="YYYY-MM-DD"  />
      </el-form-item>
      <el-form-item label="状态:">
      	<el-select v-model="form.status" placeholder="请选择" clearable class="!w-[100px]">
          <!-- <el-option label="未完成" :value="0" /> -->
          <el-option label="进行中" :value="1" />
          <el-option label="已完成" :value="2" />
        </el-select>
      </el-form-item>
			<el-form-item>
				<el-button type="primary" :icon="useRenderIcon('ri:search-line')" :loading="loading" @click="onSearch">
					搜索
				</el-button>
				<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
					重置
				</el-button>
			</el-form-item>
		</el-form>

		<div ref="contentRef" :class="['flex', deviceDetection() ? 'flex-wrap' : '']">
			<PureTableBar :class="[isShow && !deviceDetection() ? '!w-[60vw]' : 'w-full']"
				style="transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1)" title=" " :columns="columns"
				@refresh="onSearch">
				<template #buttons>
					<el-button type="primary" :icon="useRenderIcon(AddFill)" @click="openDialog()">
						创建工作计划
					</el-button>
				</template>
				<template v-slot="{ size, dynamicColumns }">
					<pure-table ref="tableRef" showOverflowTooltip table-layout="auto"
						:loading="loading" :size="size" adaptive :adaptiveConfig="{ offsetBottom: 108 }"
						:data="dataList" :columns="dynamicColumns" :pagination="pagination"
						:paginationSmall="size === 'small' ? true : false" :header-cell-style="{background: 'var(--el-fill-color-light)',
						color: 'var(--el-text-color-primary)'}" @page-size-change="handleSizeChange" @page-current-change="handleCurrentChange">

            <template #status=" { row } ">
              <!-- <el-tag type="info" v-if="row.status === 0"></el-tag>
              <el-tag type="primary" v-else-if="row.status === 1">进行中</el-tag>
              <el-tag type="success" v-else-if="row.status === 2">已完成</el-tag> -->
              {{row.statusStr}}
            </template>
            <template #attachment=" { row } ">
              <template v-if="row.attachments.length === 0">
                --
              </template>
              <template v-else>
                <div class="flex">
                  <div v-for="item in row.attachments" :key="item" class="ml-[2px]">
                    <template v-if="item.substring(item.lastIndexOf('.') + 1) === 'jpg'">
                      <img src="../../assets/file-jpg.png" alt="" style="width: 24px;height: 24px;" @click="openDetail(item)"/>
                    </template>
                    <template v-if="item.substring(item.lastIndexOf('.') + 1) === 'jepg'">
                      <img src="../../assets/file-jepg.png" alt="" style="width: 24px;height: 24px;" @click="openDetail(item)"/>
                    </template>
                    <template v-if="item.substring(item.lastIndexOf('.') + 1) === 'png'">
                      <img src="../../assets/file-png.png" alt="" style="width: 24px;height: 24px;" @click="openDetail(item)"/>
                    </template>
                    <template v-if="item.substring(item.lastIndexOf('.') + 1) === 'doc' || item.substring(item.lastIndexOf('.') + 1) === 'docx'">
                      <img src="../../assets/file-doc.png" alt="" style="width: 24px;height: 24px;" @click="openDetail(item)"/>
                    </template>
                    <template v-if="item.substring(item.lastIndexOf('.') + 1) === 'pdf'">
                      <img src="../../assets/file-pdf.png" alt="" style="width: 24px;height: 24px;" @click="openDetail(item)"/>
                    </template>
                    <template v-if="item.substring(item.lastIndexOf('.') + 1) === 'exl' || item.substring(item.lastIndexOf('.') + 1) === 'xls' || item.substring(item.lastIndexOf('.') + 1) === 'xlsx'">
                      <img src="../../assets/file-exl.png" alt="" style="width: 24px;height: 24px;" @click="openDetail(item)"/>
                    </template>
                  </div>
                </div>

              </template>
            </template>
						<template #operation="{ row }">
              <el-button class="reset-margin" link type="primary" :size="size"
              	@click="openDialog('完成工作计划', row)" v-if="row.status !== 2">
              	完成
              </el-button>
              <el-popover placement="left" :width="650" trigger="hover">
                <template #reference>
                  <el-button type="primary" link :size="size">内容</el-button>
                </template>
                <el-table :data="row.details">
                  <el-table-column prop="content" label="序号" width="60">
                    <template #default=" { row, $index } ">
                      {{$index+1}}
                    </template>
                  </el-table-column>
                  <el-table-column prop="content" label="内容" :show-overflow-tooltip="true"/>
                  <el-table-column prop="completeRate" label="完成比率(%)" width="110"/>
                  <el-table-column prop="status" label="状态"  width="100">
                    <template #default=" { row } ">
                      <span v-if="row.status === 0">未完成</span>
                      <span v-else-if="row.status === 1">已完成</span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-popover>
              <el-button class="reset-margin" link type="primary" :size="size"
              	@click="openDialog('工作计划详情', row)">
              	详情
              </el-button>
              <el-button class="reset-margin" link type="primary" :size="size"
              	@click="openDialog('审核工作计划', row)" v-if="row.status !== 2 &&  row.status !== 1">
              	审核
              </el-button>
							<el-button class="reset-margin" link type="primary" :size="size"
								@click="openDialog('编辑工作计划', row)" v-if="row.status !== 2 &&  row.status !== 1">
								编辑
							</el-button>
              <el-button class="reset-margin" link type="primary" :size="size" @click="handleDelete(row)" v-if="row.status !== 2 &&  row.status !== 1">
              	删除
              </el-button>
						</template>
					</pure-table>
				</template>
			</PureTableBar>
		</div>
    <el-dialog
      v-model="dialogVisible"
      title="附件详情"
      width="700px"
    >
      <div>
        <img :src="item" alt="附件" v-for="item in dialogInfo.attachments"/>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
	</div>
</template>

<style scoped lang="scss">
	.main-content {
		margin: 10px 10px 0 !important;
	}
  .assigneds {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .assigneds .str:last-child span{
    display: none;
  }
</style>
